<style>
.pure_table_atdn { width: 750px; margin-top: 5px; }
.pure_table_atdn th { height: 25px; line-height: 25px; }
.pure_table_atdn img { cursor: pointer; margin-right: 2px; }
.pure_table_atdn td { vertical-align: middle; }
.pure-button-atdn { color: #fff !important; background: rgb(223, 117, 20) !important; }
</style>

<?php 
$student_id = Utils::get_param('id', 0);
$start = Utils::get_param('start', date('Y-m-d', strtotime('last monday', strtotime('yesterday'))));
$end = Utils::get_param('end', date('Y-m-d', strtotime($start) + (86400 * 4)));

$opts = new stdClass();
$opts->cd = 't.signin_at >= :v1 AND t.signin_at <= :v2 AND t.student_id = :v3 AND t.is_tutorial = 0 AND t.status != -1';
$opts->cdv = array(':v1' => $start . ' 00:00:00', ':v2' => $end . ' 23:59:59', ':v3' => $student_id);
$opts->sel = 't.*, t1.course_name AS __course_name, t1.name AS __class_name, t1.teacher_name AS __teacher_name';
$opts->jt = 'LEFT JOIN pb_colg_class AS t1 ON t1.id = t.class_id';
$atdn = $orm->get('pb_colg_atdn', 't.signin_at', 'ASC', NULL, NULL, $opts)->d;

$atdn_val = ColgUtils::__atdn($atdn);
?>

<div class="pure-form">
  <input id="atdn_start" type="text" value="<?php echo $start; ?>">&nbsp;
  <input id="atdn_end" type="text" value="<?php echo $end; ?>">
  <button onclick="atdn_search();" class="pure-button">Search</button>
  <button id="atdn_val" class="pure-button pure-button-atdn"></button>
</div>

<table class="pure-table pure_table_atdn" cellpadding=0 cellspacing=0>
  <thead id="atdn_head">
    <tr>
      <th style="width: 60px;" class="ui-widget-header">Date</th>
      <th style="width: 60px;" class="ui-widget-header">Time</th>
      <th class="ui-widget-header">Class</th>
      <th style="width: 120px;" class="ui-widget-header">Teacher</th>
      <th style="width: 120px;" class="ui-widget-header">Status</th>
    </tr>
  </thead>
  <tbody id="atdn_body"></tbody>
</table>

<script type="text/javascript">
  /*<![CDATA[*/
  var __atdn_val = '<?php echo $atdn_val; ?>';
  var __atdn = JSON.parse('<?php echo addslashes(json_encode($atdn)); ?>');
  var __user = JSON.parse('<?php echo addslashes(json_encode($user)); ?>');
  
  $(function() {
    $('#atdn_start').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true,
      onSelect: function(dateText) {
        $('#atdn_end').val(Utils.shift_earlier(dateText, -4));
      }
    });
    $('#atdn_end').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true
    });
  });
  
  function render_atdn() {
    $('#atdn_val').html(parseFloat(__atdn_val, 10).toFixed(0) + '%');
    Utils.sort_by_attr('class_id', __atdn);
    $('#atdn_body').empty();
    for (var idx in __atdn) {
      var itm = __atdn[idx];
      $('#atdn_body').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td>' + itm.signin_at.split(' ')[0] + '</td>' +
          '<td>' + itm.signin_at.split(' ')[1] + '</td>' +
          '<td>' + itm.__course_name + ' ' + itm.__class_name + '</td>' +
          '<td>' + itm.__teacher_name + '</td>' +
          '<td>' + status_to_text(itm.status) + '</td>' +
        '</tr>'
      );
    }
    if (__atdn.length == 0) {
      $('#atdn_body').append('<tr class="pure-table-even"><td colspan=' + $('#atdn_head').children('th').length + '>None</td></tr>');
    }
  };

  function atdn_search() {
    Url.redirect(__redmd, __sys + '.php?i=' + __id + '&__file=' + __file + '&id=' + __data[0].id + '&at=3' + '&start=' + Utils.encodeURI($('#atdn_start').val()) + '&end=' + Utils.encodeURI($('#atdn_end').val()));
  }
  
  function status_to_text(status) {
    if (status == 0) {
      return 'Present';
    } else if (status == 1) {
      return 'Sick';
    } else if (status == 2) {
      return 'Holiday';
    } else if (status == 3) {
      return 'Absent';
    } else if (status == 4) {
      return 'Late';
    } else if (status == 5) {
      return 'Excused Absent';
    }
  }
  
  /*]]>*/
</script>